<script setup lang="ts">
import { RouterLink, RouterView } from 'vue-router'
</script>

<template>

  

  <div class='container'>
   
   
    <!-- <main class='box'>
      <header class='header'>
        头部-首页
      </header>

      <div class='content'>
        主体内容部分
      </div>
    </main> -->

  <RouterView />

  <!-- 判断是否需要显示 footer -->
  <footer class='footer' v-if="!$route.meta.hidden">
    <RouterLink to='/home'>
      <!-- 用来显示图标 -->
      <span class='iconfont icon-shouye'></span>
      <!-- 显示标题 -->
      <p>首页</p>
    </RouterLink>
    <RouterLink to='/kind'>
      <span class='iconfont icon-fenlei'></span>
      <p>分类</p>
    </RouterLink>
      <RouterLink to='/cart'>
      <span class='iconfont icon-gouwuche'></span>
      <p>购物车</p>
    </RouterLink>
    <RouterLink to='/user'>
      <span class='iconfont icon-My'></span>
      <p>用户</p>
    </RouterLink>
  </footer>
  </div>

</template>

<style lang='scss'>
html,body,#app,.container {
  height: 100%;
}
html {
  /* 
    目前百分之 90 以上的 UI 设计师会使用 iphone6/7/8 的尺寸进行设计，我们的设计稿如果是
    iPhone 6/7/8 为基础图,我们应该使用公式进行计算 100 / 375 * 100 = 26.666666666vw
    如果设计稿 iPhone12Pro 为基础图，那么我们可以 100 / 390 * 100 = 25.641vw

  */
  font-size: 26.6666666666vw;
}
body {
  /* 具体的值要根据设计图来决定应该写多少，这里的值是设计图中出现次数最多的字号 */
  font-size: 12px;
}
.container {
  display: flex;
  flex-direction: column;
}
.box {
  flex: 1;
  display: flex;
  flex-direction: column;
  .header {
    height: 0.44rem;
    background-color: #f66;
    color: white;
    line-height: 0.44rem;
    text-align: center;
  }
  .content {
    flex: 1;
    /* background-color: #ccc; */
  }
}
.footer {
  height: 0.5rem;
  border-top: 1px solid #ccc;
  display: flex;

  a {
    flex: 1;
    display: flex;
    flex-direction: column;
    justify-content: flex-start;
    align-items: center;
    text-decoration: none;
    color: #000;
    -webkit-tap-highlight-color:rgba(0,0,0,0);

    span {
      padding-top: 4px;
      box-sizing:border-box;
    }
  }
}
.footer .router-link-active{
  color: #f66;
}
</style>
